<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>自定义指令</title>
  <script src="../js/vue.js"></script>
</head>

<body>
  <div id="root">
    <h2>当前的n值是：<span v-text="n"></span></h2>
    <h2>放大10倍之后的n值是:<span v-big="n"></span></h2>
    <!-- <h2>放大10倍之后的n值是:<span v-big-number="n"></span></h2> -->
    <button @click="n++">点我+1</button>
    <hr>
    <input type="text" v-bind:value="n">
    <input type="text" v-fbind:value="n">
  </div>
  <script>
    Vue.config.productionTip = false
    //全局指令
    /*
    Vue.directive('fbind',{
      bind(element,binding){
        element.value = binding.value
        console.log('bind')
      },
      inserted(element,binding){
        console.log('inserted')
        element.focus()
      },
      update(element,binding){
        console.log('update')
        element.value = binding.value
      }
    })
    */
    Vue.directive('fbind',(element,binding)=>{
      element.value = binding.value * 10
    })

    //创建vue实例
    const vm = new Vue({
      el: '#root',
      data: {
        n:1
      },
      methods:{
      },
      //局部指令
      directives:{
        //函数何时会被调用?1.指令与元素成功绑定时(一上来)。2.指令所在的模板被重新解析时。指令里面的this都是指向的是window
        big(element,binding){ //element就是标签 
          element.innerText = binding.value * 10
          //console.log(element,binding.value)
        },
        /*
        'big-number'(){
          console.log(11)
        },
        */
        /*
        fbind(element,binding){
          element.value = binding.value * 10
          element.focus()//无法获取到焦点
        }
        */
        //对象的写法
        /*
        fbind:{
          //指令与元素成功绑定时
          bind(element,binding){
            element.value = binding.value
            console.log('bind')
          },
          //指令所在元素被插入页面时候
          inserted(element,binding){
            console.log('inserted')
            element.focus()
          },
          //指令所在模板被重新解析时候
          update(element,binding){
            console.log('update')
            element.value = binding.value
            //element.focus()
          }
        }
        */
      }
    })
  </script>
</body>

</html>